<template>
  <div class="layout">
    <aside style="width: 200px">
      <h3>薇优医医疗管理系统</h3>
      <MyMenu :list="list" />
    </aside>
  </div>
</template>

<script>
import MyMenu from "@/components/MyMenu";
// import testData from '../login/menu.js'
// import {reactive}from "vue"
// import store from '@/store';
// import { computed }from "vue"
// const state=reactive({
//     list: []
// })
// const MenuList=store.getters.MenuList
// const age = computed(() => MenuList)
// const Menu=watch(()=>MenuList{

// })
import "@/style/common.less";
export default {
  components: { MyMenu },
  data() {
    return {
      list: [],
    };
  },
  computed: {
    munuList() {
      return this.$store.getters.MenuList;
    },
  },
  watch: {
    "$store.getters.MenuList": {
      immediate: true,
      deep: true,
      handler(rows) {
        function loop(pId) {
          let _tree = JSON.parse(
            JSON.stringify(
              rows.filter((it) => (pId ? pId === it.parent_id : !it.parent_id))
            )
          );
          _tree = _tree.map((it) => {
            let hasChildren = rows.some((item) => item.parent_id === it.id);
            if (hasChildren) it.children = loop(it.id);
            return it;
          });

          return _tree;
        }

        let tree = loop();
        this.list = tree;
      },
    },
  },
};
</script>

<style lang="less" scoped>
.layout {
  background: turquoise;
  height: 940px;

}
aside {
  height: 940px;

}
h3 {
  margin: auto;
  height: 48px;
  line-height: 48px;
  text-align: center;
}
</style>
